import {useState} from "react";
import "./app.scss"
import Square from "./components/Square/index"

// 井字游戏检查胜利者或平局的函数
function checkWinner(board) {
    // 将一维数组映射到二维棋盘
    const mappedBoard = [
        [board[0], board[1], board[2]],
        [board[3], board[4], board[5]],
        [board[6], board[7], board[8]]
    ];

    // 检查行
    for (let i = 0; i < 3; i++) {
        if (mappedBoard[i][0] !== ' ' && mappedBoard[i][0] === mappedBoard[i][1] && mappedBoard[i][1] === mappedBoard[i][2]) {
            return mappedBoard[i][0];
        }
    }

    // 检查列
    for (let j = 0; j < 3; j++) {
        if (mappedBoard[0][j] !== ' ' && mappedBoard[0][j] === mappedBoard[1][j] && mappedBoard[1][j] === mappedBoard[2][j]) {
            return mappedBoard[0][j];
        }
    }

    // 检查对角线
    if (mappedBoard[0][0] !== ' ' && mappedBoard[0][0] === mappedBoard[1][1] && mappedBoard[1][1] === mappedBoard[2][2]) {
        return mappedBoard[0][0];
    }
    if (mappedBoard[0][2] !== ' ' && mappedBoard[0][2] === mappedBoard[1][1] && mappedBoard[1][1] === mappedBoard[2][0]) {
        return mappedBoard[0][2];
    }

    // 检查平局
    let isFull = true;
    for (let i = 0; i < board.length; i++) {
        if (board[i] === null) {
            isFull = false;
            break;
        }
    }
    if (isFull) {
        return 'draw';
    }

    // 如果没有赢家也没有平局，返回 null
    return null;
}

export default function Board() {
    const [squares, setSquares] = useState(Array(9).fill(null))
    const [isWin, setIsWin] = useState(false)
    const [xIsNext, setXIsNext] = useState(true);

    function handleSquare(i) {
        if (squares[i]) return // 判断是否已经选中
        if (isWin) return;
        const nextSquares = squares.slice()
        nextSquares[i] = xIsNext ? 'X' : 'O'; // 切换选中标识
        setSquares([...nextSquares])
        setXIsNext(!xIsNext)
        const result = checkWinner(nextSquares)
        // 打印结果
        if (result === 'X' || result === 'O') {
            // console.log(`Player ${result} wins!`);
            setIsWin(true)
            alert(`${result} 赢了!`)
        } else if (result === 'draw') {
            // console.log("It's a draw!");
            setIsWin(true)
            alert('平局')
        } else {
            console.log("No winner yet.");
        }
    }

    // 重新开始
    function handleRestStart() {
        setIsWin(false)
        setSquares(Array(9).fill(null))
        setXIsNext(true)
    }

    return (
        <>
            <div className="tip">
                <span>{xIsNext ? 'X' : 'O'}</span>
                <button className="square" onClick={() => handleRestStart()}>重新开始</button>
            </div>
            <div className="board-row">
                <Square value={squares[0]} onSquare={() => handleSquare(0)}/>
                <Square value={squares[1]} onSquare={() => handleSquare(1)}/>
                <Square value={squares[2]} onSquare={() => handleSquare(2)}/>
            </div>
            <div className="board-row">
                <Square value={squares[3]} onSquare={() => handleSquare(3)}/>
                <Square value={squares[4]} onSquare={() => handleSquare(4)}/>
                <Square value={squares[5]} onSquare={() => handleSquare(5)}/>
            </div>
            <div className="board-row">
                <Square value={squares[6]} onSquare={() => handleSquare(6)}/>
                <Square value={squares[7]} onSquare={() => handleSquare(7)}/>
                <Square value={squares[8]} onSquare={() => handleSquare(8)}/>
            </div>
        </>
    );
}